<template>
  <div class="top-search" :style="bgcolor ? `background: ${ bgcolor }` : ''">
    <div class="search-box">
      <span style="padding: 0.15rem 0.3rem; display: flex; justify-content: center; align-items: center;">
        <slot>
          <van-icon name="search"/>
        </slot>
      </span>
      <input v-model="showValue" type="text" style="flex: 1;" :placeholder="placeholder || '请输入'" @blur="$emit('input', showValue)"/>
      <div style="width: 1px; height: 0.4rem; background: #1a1a1a; margin-left: 0.2rem;"></div>
      <span style="padding: 0.15rem 0.41rem; font-size: 0.35rem;" @click="onSearch">搜索</span>
    </div>
  </div>
</template>

<script>
export default {
  props: [ 'value', 'placeholder', 'bgcolor' ],
  data() {
    return {
      showValue: '',
      optionvalue: 0,
      option: [
        { text: '全部商品', value: 0 },
        { text: '新款商品', value: 1 },
        { text: '活动商品', value: 2 }
      ]
    }
  },
  watch: {
    value() {
      if (this.value) {
        this.showValue = this.value;
        return ;
      }
      this.showValue = '';
    },
  },
  methods: {
    onSearch() {
      this.$emit('search');
    }
  },
  mounted() {
    if (this.value) {
      this.showValue = this.value;
    }
  }
}
</script>

<style lang="less">
.top-search{
  width: 100%;
  height: 1.33rem;
  box-sizing: border-box;
  padding: 0.27rem;
  .search-box {
    width: 100%;
    height: 100%;
    background: #f8f8fb;
    border-radius: 0.13rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    font-size: 0.3rem;
    color: #1a1a1a;
    input {
      border: none;
      outline: none;
      background: none;
    }
  }
}
</style>
